<template>
  <div ref="table" v-loading="loading">
    <el-table v-if="!fixHeigth" ref="multipleTable" :data="tableData" :header-cell-style="{background:headerBgColor}" border style="width: 100%;" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
      <el-table-column v-if="isShowSelection" type="selection" width="55" align="center" :selectable="isSelectable" />
      <el-table-column v-if="isShowSerialNumber" align="center" label="序号" min-width="70">
        <template slot-scope="scope">
          <span>{{ scope.$index+(currentPage-1)*pageSize+1 }}</span>
        </template>
      </el-table-column>
      <template v-for="k in props">
        <el-table-column v-if="k.fixw" :min-width="k.fixw" align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot slot-scope="scope" :name="k.prop" :data="scope.row">{{ scope.row[k.prop] }}</slot>
        </el-table-column>
        <el-table-column v-else align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot slot-scope="scope" :name="k.prop" :data="scope.row">{{ scope.row[k.prop] }}</slot>
        </el-table-column>
      </template>
      <el-table-column v-if="isShowOperation" align="center" :fixed="fixedType?'right':fixedType" label="操作">
        <slot slot-scope="scope" name="operation" :data="scope.row" />
      </el-table-column>
    </el-table>

    <el-table v-else ref="multipleTable" :height="tableH" :data="tableData" :header-cell-style="{background:headerBgColor}" border style="width: 100%;" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
      <el-table-column v-if="isShowSelection" type="selection" width="55" align="center" :selectable="isSelectable" />
      <el-table-column v-if="isShowSerialNumber" align="center" label="序号" min-width="70">
        <template slot-scope="scope">
          <span>{{ scope.$index+(currentPage-1)*pageSize+1 }}</span>
        </template>
      </el-table-column>
      <template v-for="k in props">
        <el-table-column v-if="k.fixw" :min-width="k.fixw" align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot slot-scope="scope" :name="k.prop" :data="scope.row">{{ scope.row[k.prop] }}</slot>
        </el-table-column>
        <el-table-column v-else align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot slot-scope="scope" :name="k.prop" :data="scope.row">{{ scope.row[k.prop] }}</slot>
        </el-table-column>
      </template>
      <el-table-column v-if="isShowOperation" align="center" :fixed="fixedType?'right':fixedType" label="操作">
        <slot slot-scope="scope" name="operation" :data="scope.row" />
      </el-table-column>
    </el-table>

    <div v-if="isShowPagination" class="bottom-row">
      <el-pagination
        :page-size="pageSize"
        :current-page.sync="currentPage"
        layout="prev, pager, next, jumper, total"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    headerBgColor: {
      type: String,
      default: 'white'
    },
    isShowSelection: {
      type: Boolean,
      default: false
    },
    immediate: {
      type: Boolean,
      default: true
    },
    fixHeigth: { // 固定高度
      type: Boolean,
      default: false
    },
    isShowSerialNumber: {
      type: Boolean,
      default: true
    },
    isShowOperation: {
      type: Boolean,
      default: true
    },
    isShowPagination: {
      type: Boolean,
      default: true
    },
    isSecondLayer: {
      type: Boolean,
      default: true
    },
    isPost: {
      type: Boolean,
      default: true
    },
    isCustomTime: { // 起始时间划分为两个参数的情况
      type: Boolean,
      default: false
    },
    tableH: { // 表格高度，横向内容超过可视区域时适配小屏幕电脑
      type: Number,
      default: 0
    },
    fixedType: { // 是否固定右侧操作栏
      type: Boolean,
      default: false
    },
    isArray: {
      type: Boolean,
      default: true
    },
    callback: Function,
    sort: {
      type: Array,
      default: () => []
    },
    query: Object,
    props: Array,
    action: String,
    isSelectable: Function,
    dataList: String,
    selected: String
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1
    }
  },
  async created() {
    this.immediate && await this.search()
  },
  methods: {
    async search(i, isScroll) {
      this.currentPage = i > 0 ? i : this.currentPage
      const query = JSON.parse(JSON.stringify(this.query))
      for (const key in query) {
        if (Array.isArray(query[key])) {
          query[key] = query[key].toString()
        }
      }
      const req = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...query
      }
      if (this.isCustomTime) {
        const paytime = this.query.payTime || []
        req.payTimeStart = paytime[0]
        req.payTimeEnd = paytime[1]
      }
      this.loading = true
      if (this.isPost) {
        this.$api.post(this.action, req, r => {
          this.loading = false
          this.handleOperation(r, isScroll)
        })
      } else {
        this.$api.get4(this.action, req, r => {
          this.loading = false
          this.handleOperation(r, isScroll)
        })
      }
    },
    handleOperation(r, isScroll) {
      if (r.flag) {
        this.callback && this.callback(r) // 如果要对返回值做额外操作
        if (this.isSecondLayer) { // 有分页
          if (r.data.allNum) {
            this.total = +r.data.allNum
          } else {
            this.total = +r.data.total
          }
          if (!this.dataList) { // 如果接口返回的data数据为dataList，根据实际情况而定
            this.tableData = r.data.dataList
          } else { // 其他参数名时取值
            this.tableData = r.data[this.dataList]
          }
        } else { // 没有分页
          if (this.isArray) { // 如果数据类型为数组
            this.tableData = r.data
          } else { // 如果数据类型为非数组
            this.tableData = []
            this.tableData.push(r.data)
          }
        }
        this.selected && this.handleTest()
        isScroll && this.$refs.table.scrollIntoView({ behavior: 'smooth', block: 'start' })
      }
    },
    handleCurrentChange(index) {
      this.search(index, true)
    },
    handleSortChange(val) {
      this.$emit('sortChange', val)
    },
    handleSelectionChange(val) {
      this.$emit('selectionChange', val)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.search(1, true)
    },
    handleTest() {
      const rows = this.selected.split(',')
      this.tableData.forEach((row, i) => {
        rows.forEach(_ => {
          if (row.id === parseInt(_)) {
            this.$nextTick(() => {
              this.$refs.test.toggleRowSelection(row, true)
            })
          }
        })
      })
    },
    clearSelected() {
      this.$refs.multipleTable.clearSelection()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
